<template>
  <a-modal
    :visible="isshow"
    :title="title"
    width="740px"
    centered
    :footer="null"
    @cancel="close"
  >
    <div class="form" v-for="(item, index) in form" :key="index">
      <a-form-model ref="ruleform" :model="item" :rules="rules">
        <div class="form-content">
          <div>
            <a-form-model-item label="开票头" :colon="flag" prop="invoiceName">
              <a-input
                v-model="item.invoiceName"
                placeholder="请输入开票头"
                size="large"
              />
            </a-form-model-item>
            <a-form-model-item label="纳税人识别号" :colon="flag" prop="itin">
              <a-input
                v-model="item.itin"
                placeholder="请输入纳税人识别号"
                size="large"
              />
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item
              label="纳税类型"
              class="types"
              :colon="flag"
              prop="type"
            >
              <a-select v-model="item.type" placeholder="请选择纳税类型">
                <a-select-option
                  v-for="item in taxTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              label="开户名称"
              :colon="flag"
              prop="accountName"
            >
              <a-input
                v-model="item.accountName"
                placeholder="请输入开户名称"
                size="large"
              />
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item label="开户银行" :colon="flag" prop="bank">
              <a-input
                v-model="item.bank"
                placeholder="请输入开户银行"
                size="large"
              />
            </a-form-model-item>
            <a-form-model-item
              label=" 银行账号"
              :colon="flag"
              prop="bankAccount"
            >
              <a-input
                v-model="item.bankAccount"
                placeholder="请输入银行账号"
                size="large"
              />
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item
              label="预留电话"
              :colon="flag"
              prop="reservedPhone"
            >
              <a-input
                v-model="item.reservedPhone"
                placeholder="请输入预留电话"
                size="large"
              />
            </a-form-model-item>
            <a-form-model-item label="预留地址" :colon="flag">
              <a-input
                v-model="item.reservedAddress"
                placeholder="请输入预留地址"
                size="large"
              />
            </a-form-model-item>
          </div>
        </div>
      </a-form-model>
      <a href="#" class="add" @click="deletePaper(index, item.id)"> 删除 </a>
    </div>
    <a href="#" class="add" @click="addPaper"> +添加开票信息 </a>
    <Footer @close="close" @ok="submit" />
  </a-modal>
</template>
<script>
import { phoneCheck, changeChar, onlyNumber } from '@/utils/validator'
import Footer from '@/components/footer'
import {
  deleteContractSubjectAccount,
  deleteCustomerAccountDelById
} from '@/api/human'
export default {
  props: {
    list: {
      type: Array
    },
    isshow: {
      type: Boolean
    }
  },
  data() {
    return {
      title: '开票信息',
      flag: false,
      visible: false,
      form: [{}],
      rules: {
        itin: [
          { required: true, message: '请输入纳税人识别号' },
          { validator: changeChar.bind(this) },
          { max: 20, message: '长度不能超过20' }
        ],
        invoiceName: [
          { required: true, message: '请输入开票头' },
          { max: 50, message: '长度不能超过50' }
        ],
        type: [{ required: true, message: '请选择纳税类型' }],
        accountName: [
          { required: true, message: '请输入开户名称' },
          { max: 50, message: '长度不能超过50' }
        ],
        bank: [
          { required: true, message: '请输入开户银行' },
          { max: 50, message: '长度不能超过50' }
        ],
        reservedPhone: [{ validator: phoneCheck.bind(this) }],
        bankAccount: [
          { required: true, message: '请输入银行账号' },
          { validator: onlyNumber.bind(this) },
          { max: 19, message: '长度不能超过19' }
        ]
      },
      taxTypeOptions: [
        { label: '一般纳税人', value: 'GENERAL' },
        { label: '普通纳税人', value: 'SCALE' }
      ],
      // 保存删除前的数据
      beforeDelete: []
    }
  },

  components: {
    Footer
  },
  methods: {
    close() {
      this.beforeDelete = []
      this.$emit('close')
      this.$emit('updata')
    },
    // 添加开票信息
    addPaper() {
      if (this.path === '/signed/signedlist/info') {
        // 签约主体的修改
        this.form.push({
          contractSubjectId: this.$route.query.id
        })
      } else {
        // 客户管理的修改
        this.form.push({
          baseId: this.$route.query.id
        })
      }
    },
    async deletePaper(index, id) {
      this.form.splice(index, 1)
      this.beforeDelete = JSON.parse(JSON.stringify(this.form))
      if (id) {
        if (this.path === '/signed/signedlist/info') {
          // 签约主体的删除
          await deleteContractSubjectAccount({ id })
        } else {
          // 客户管理的删除
          await deleteCustomerAccountDelById({ id })
        }
      }
      this.$message.success('删除成功！')
      this.$emit('updata')
    },
    // 提交开票信息
    submit() {
      // 触发检查
      if (this.$refs.ruleform && this.$refs.ruleform.length > 0) {
        let validate = true
        this.$refs.ruleform.forEach(item => {
          item.validate(valida => {
            validate = valida
          })
        })
        // 传递数据，触发保存
        setTimeout(() => {
          if (validate) {
            this.$emit('close')
            this.$emit('updata', this.form)
            this.beforeDelete = []
          }
        })
      } else {
        this.$emit('close')
        this.beforeDelete = []
      }
    }
  },
  watch: {
    list(n) {
      if (this.beforeDelete.length < 1) {
        this.form = JSON.parse(JSON.stringify(n))
        this.form.forEach(item => {
          item.type = (item.type && item.type.code) || undefined
          delete item.updateTime
          delete item.updatedBy
          delete item.state
        })
      } else {
        this.form = JSON.parse(JSON.stringify(this.beforeDelete))
      }
    }
  },
  created() {
    // 保存路径
    this.path = this.$route.path
  }
}
</script>
<style lang="less" scoped>
@import '../../../assets/css/modal.less';
.form {
  border-bottom: 1px solid #e8e8e8;
}
.form-content {
  > div {
    display: flex;
    justify-content: center;
    .ant-form-item {
      margin-left: 20px;
      flex: 1;
      &:first-child {
        margin-left: 0;
      }
    }
    .types {
      .type {
        display: flex;
        > .ant-input {
          margin-left: 20px;
        }
      }
    }
  }
}
.remove {
  display: block;
  padding-bottom: 20px;
  color: #0096ff;
}
.add {
  display: block;
  color: #0096ff;
  padding: 20px 0;
}
/deep/.ant-modal-body {
  max-height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 4px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #e1e1e1;
  }
}
</style>
